<template>
    <div class="article-manager">
      <pages-header
        ref="pageHeader"
        :title="$route.params.id ? '编辑服务科目' : '添加服务科目'"
        :backUrl="$routeProStr + '/classification/serviceSubject/index'"
      ></pages-header>
      <el-card :bordered="false" shadow="never" class="mt16">
        <el-form
          class="form"
          ref="formValidate"
          :model="formValidate"
          :rules="ruleValidate"
          :label-width="labelWidth"
          :label-position="labelPosition"
          @submit.native.prevent
        >
          <div class="goodsTitle acea-row">
            <div class="title">服务科目信息</div>
          </div>
          <div>
            <el-form-item label="名称：" prop="name" label-for="name">
              <el-input v-model="formValidate.name" placeholder="请输入" class="content_width" />
            </el-form-item>
            <el-form-item label="分类：" label-for="pid" prop="pid">
              <el-cascader
                class="content_width"
                v-model="formValidate.pid"
                size="small"
                :options="treeData"
                :props="{ multiple: false, checkStrictly: true, emitPath: false }"
                clearable
              ></el-cascader>
            </el-form-item>
          </div>
          <el-button type="primary" class="submission" v-db-click @click="onsubmit('formValidate')">提交</el-button>
        </el-form>
        <el-dialog :visible.sync="modalPic" width="950px" title="上传商品图" :close-on-click-modal="false">
          <uploadPictures
            :isChoice="isChoice"
            @getPic="getPic"
            :gridBtn="gridBtn"
            :gridPic="gridPic"
            v-if="modalPic"
          ></uploadPictures>
        </el-dialog>
      </el-card>
    </div>
  </template>
  
  <script>
  import { mapState } from 'vuex';
  import uploadPictures from '@/components/uploadPictures';
  import { setServiceSubject, getServiceCategoryAll, getServiceSubjectDetail } from '@/api/classification';
  export default {
    name: 'addService',
    components: { uploadPictures },
    data() {
      const validateUpload2 = (rule, value, callback) => {
        if (!this.formValidate.pid) {
          callback(new Error('请选择服务分类'));
        } else {
          callback();
        }
      };
      return {
        isChoice: '单选',
        gridPic: {
          xl: 6,
          lg: 8,
          md: 12,
          sm: 12,
          xs: 12,
        },
        gridBtn: {
          xl: 4,
          lg: 8,
          md: 8,
          sm: 8,
          xs: 8,
        },
        loading: false,
        formValidate: {
          id: 0,
          pid: 0,
          name: '',
          image: '',
          introduce: '',
        },
        ruleValidate: {
          name: [{ required: true, message: '请输入服务科目名称', trigger: 'blur' }],
          pid: [
            {
              required: true,
              validator: validateUpload2,
              trigger: 'change',
              type: 'number',
            },
          ],
        },
        modalPic: false,
        treeData: [],
      };
    },
    computed: {
      ...mapState('media', ['isMobile']),
      labelWidth() {
        return this.isMobile ? undefined : '100px';
      },
      labelPosition() {
        return this.isMobile ? 'top' : 'right';
      },
    },
    watch: {
      $route(to, from) {
        if (this.$route.params.id) {
          this.getDetails();
        } else {
          this.formValidate = {
            id: 0,
            pid: 0,
            name: '',
            image: '',
            introduce: '',
          };
        }
      },
    },
    methods: {
      getEditorContent(data) {
        this.content = data;
      },
      // 选择图片
      modalPicTap() {
        this.modalPic = true;
      },
      // 选中图片
      getPic(pc) {
        this.formValidate.image = pc.att_dir;
        this.modalPic = false;
      },
      // 分类
      getClass() {
        getServiceCategoryAll()
          .then(async (res) => {
            this.treeData = res.data;
          })
          .catch((res) => {
            this.$message.error(res.msg);
          });
      },
      // 提交数据
      onsubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            let data = {
              url: this.formValidate.id
                ? `classification/serviceSubject/${this.formValidate.id}`
                : 'classification/serviceSubject',
              method: this.formValidate.id ? 'put' : 'post',
              datas: this.formValidate,
            };
  
            setServiceSubject(data)
              .then(async (res) => {
                this.$message.success(res.msg);
                setTimeout(() => {
                  this.$router.push({ path: this.$routeProStr + '/classification/serviceSubject/index' });
                }, 500);
              })
              .catch((res) => {
                this.$message.error(res.msg);
              });
          } else {
            return false;
          }
        });
      },
      // 文章详情
      getDetails() {
        getServiceSubjectDetail(this.$route.params.id)
          .then(async (res) => {
            console.log(res);
  
            let data = res.data;
            this.formValidate = {
              id: data.id,
              pid: data.pid,
              name: data.name,
              image: data.image,
              introduce: data.introduce,
            };
          })
          .catch((res) => {
            this.loading = false;
            this.$message.error(res.msg);
          });
      },
    },
    mounted() {
      if (this.$route.params.id) {
        this.getDetails();
      }
    },
    created() {
      this.getClass();
    },
  };
  </script>
  <style scoped lang="scss">
  .content_width {
    width: 414px;
  }
  ::v-deep .ivu-form-item-content {
    line-height: unset !important;
  }
  .picBox {
    display: inline-block;
    cursor: pointer;
  }
  
  .form .goodsTitle {
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    margin-bottom: 25px;
  }
  
  .form .goodsTitle ~ .goodsTitle {
    margin-top: 20px;
  }
  
  .form .goodsTitle .title {
    border-bottom: 2px solid var(--prev-color-primary);
    padding: 0 8px 12px 5px;
    color: #000;
    font-size: 14px;
  }
  
  .form .goodsTitle .icons {
    font-size: 15px;
    margin-right: 8px;
    color: #999;
  }
  
  .form .add {
    font-size: 12px;
    color: var(--prev-color-primary);
    padding: 0 12px;
    cursor: pointer;
  }
  
  .form .radio {
    margin-right: 20px;
  }
  
  .form .submission {
    width: 10%;
    margin-left: 27px;
  }
  
  .form .upLoad {
    width: 58px;
    height: 58px;
    line-height: 58px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
  }
  
  .form .iconfont {
    color: #898989;
  }
  
  .form .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;
  }
  
  .form .pictrue img {
    width: 100%;
    height: 100%;
  }
  
  .Modals .address {
    width: 90%;
  }
  
  .Modals .address .iconfont {
    font-size: 20px;
  }
  .tip {
    margin-top: 10px;
    color: #bbb;
    font-size: 12px;
  }
  </style>
  